<template>
  <div class="home">
    <Layout>
      <Content style="display: flex; height: calc(100vh - 64px)">
        <!-- 画布区域 -->
        <div id="workspace">
          <div class="canvas-box">
            <div class="inside-shadow"></div>
            <div class="top">
              <div>
                <Button size="small" @click="modal = true">素材</Button>
                <history></history>
              </div>
              <div>
                <save></save>
              </div>
            </div>
            <canvas id="canvas" :class="state.ruler ? 'design-stage-grid' : ''"></canvas>
            <dragMode v-if="state.show"></dragMode>
            <zoom></zoom>
          </div>
        </div>
      </Content>
    </Layout>
    <Drawer v-if="modal" v-model="modal" title="元素" height="80" placement="bottom">
      <div>
        <Menu mode="horizontal" :active-name="state.menuActive" accordion @on-select="showToolsBar">
          <MenuItem :name="1" class="menu-item">
            <Icon type="md-book" size="24" />
            <span>{{ $t('templates') }}</span>
          </MenuItem>
          <MenuItem :name="2" class="menu-item">
            <Icon type="md-images" size="24" />
            <span>{{ $t('elements') }}</span>
          </MenuItem>
          <MenuItem :name="3" class="menu-item">
            <Icon type="ios-leaf-outline" size="24" />
            <span>{{ $t('material.cartoon') }}</span>
          </MenuItem>
          <MenuItem :name="4" class="menu-item">
            <Icon type="md-reorder" size="24" />
            <span>{{ $t('layers') }}</span>
          </MenuItem>
          <MenuItem :name="5" class="menu-item">
            <Icon type="ios-contact-outline" size="24" />
            <span>{{ $t('mymaterial') }}</span>
          </MenuItem>
        </Menu>
        <!-- 生成模板 -->
        <div v-show="state.menuActive === 1" class="left-panel">
          <import-tmpl></import-tmpl>
        </div>
        <!-- 常用元素 -->
        <div v-show="state.menuActive === 2" class="left-panel">
          <tools></tools>
          <fontTmpl></fontTmpl>
        </div>
        <!-- 卡通素材 -->
        <div v-show="state.menuActive === 3" class="left-panel">
          <importSvgEl></importSvgEl>
        </div>
        <!-- 图层设置 -->
        <div v-show="state.menuActive === 4" class="left-panel">
          <layer></layer>
        </div>
        <!-- 我的素材 -->
        <div v-if="state.menuActive === 5" class="left-panel">
          <myMaterial></myMaterial>
        </div>
      </div>
    </Drawer>
  </div>
</template>

<script name="Home" setup>
// 导入元素
import importJson from '@/components/importJSON.vue';
import importFile from '@/components/importFile.vue';
import fontTmpl from '@/components/fontTmpl.vue';

// 顶部组件
import align from '@/components/align.vue';
import myTemplName from '@/components/myTemplName.vue';
import centerAlign from '@/components/centerAlign.vue';
import flip from '@/components/flip.vue';
import previewCurrent from '@/components/previewCurrent';
import save from '@/components/save.vue';
import lang from '@/components/lang.vue';
import clone from '@/components/clone.vue';
import group from '@/components/group.vue';
import zoom from '@/components/zoom.vue';
import dragMode from '@/components/dragMode.vue';
import lock from '@/components/lock.vue';
import dele from '@/components/del.vue';
import waterMark from '@/components/waterMark.vue';
import login from '@/components/login';
// 左侧组件
import importTmpl from '@/components/importTmpl.vue';
import myMaterial from '@/components/myMaterial/index.vue';
import tools from '@/components/tools.vue';
import importSvgEl from '@/components/importSvgEl.vue';
import bgBar from '@/components/bgBar.vue';
import setSize from '@/components/setSize.vue';
import replaceImg from '@/components/replaceImg.vue';
import filters from '@/components/filters.vue';
import imgStroke from '@/components/imgStroke.vue';
// 右侧组件
import history from '@/components/history.vue';
import layer from '@/components/layer.vue';
import attribute from '@/components/attribute.vue';

import { Message, Modal, Drawer, Button } from 'view-ui-plus';
// 功能组件
import { fabric } from 'fabric';
import { ref } from 'vue';

// hooks
import useSelectListen from '@/hooks/useSelectListen';

const modal = ref(false);
const APIHOST = import.meta.env.APP_APIHOST;

import Editor, {
  DringPlugin,
  AlignGuidLinePlugin,
  ControlsPlugin,
  ControlsRotatePlugin,
  CenterAlignPlugin,
  LayerPlugin,
  CopyPlugin,
  MoveHotKeyPlugin,
  DeleteHotKeyPlugin,
  GroupPlugin,
  DrawLinePlugin,
  GroupTextEditorPlugin,
  GroupAlignPlugin,
  WorkspacePlugin,
  HistoryPlugin,
  FlipPlugin,
  RulerPlugin,
  MaterialPlugin,
  WaterMarkPlugin,
  FontPlugin,
} from '@kuaitu/core';

// 创建编辑器
const canvasEditor = new Editor();

const state = reactive({
  menuActive: 1,
  show: false,
  toolsBarShow: true,
  attrBarShow: true,
  select: null,
  ruler: true,
});

onMounted(() => {
  // 初始化fabric
  const canvas = new fabric.Canvas('canvas', {
    fireRightClick: true, // 启用右键，button的数字为3
    stopContextMenu: true, // 禁止默认右键菜单
    controlsAboveOverlay: true, // 超出clipPath后仍然展示控制条
    imageSmoothingEnabled: false, // 解决文字导出后不清晰问题
    preserveObjectStacking: true, // 当选择画布中的对象时，让对象不在顶层。
  });

  // 初始化编辑器
  canvasEditor.init(canvas);
  canvasEditor.use(DringPlugin);
  canvasEditor.use(AlignGuidLinePlugin);
  canvasEditor.use(ControlsPlugin);
  canvasEditor.use(ControlsRotatePlugin);
  canvasEditor.use(CenterAlignPlugin);
  canvasEditor.use(LayerPlugin);
  canvasEditor.use(CopyPlugin);
  canvasEditor.use(MoveHotKeyPlugin);
  canvasEditor.use(DeleteHotKeyPlugin);
  canvasEditor.use(GroupPlugin);
  canvasEditor.use(DrawLinePlugin);
  canvasEditor.use(GroupTextEditorPlugin);
  canvasEditor.use(GroupAlignPlugin);
  canvasEditor.use(WorkspacePlugin);
  canvasEditor.use(HistoryPlugin);
  canvasEditor.use(FlipPlugin);
  canvasEditor.use(RulerPlugin);
  canvasEditor.use(FontPlugin, {
    repoSrc: APIHOST,
  });
  canvasEditor.use(MaterialPlugin, {
    repoSrc: APIHOST,
  });
  canvasEditor.use(WaterMarkPlugin);

  state.show = true;
  // 默认打开标尺
  if (state.ruler) {
    canvasEditor.rulerEnable();
  }
});

onUnmounted(() => canvasEditor.destory());
const rulerSwitch = (val) => {
  if (val) {
    canvasEditor.rulerEnable();
  } else {
    canvasEditor.rulerDisable();
  }
};

// 隐藏工具条
const hideToolsBar = () => {
  state.toolsBarShow = !state.toolsBarShow;
};
// 展示工具条
const showToolsBar = (val) => {
  state.menuActive = val;
  state.toolsBarShow = true;
};
// 属性面板开关
const switchAttrBar = () => {
  state.attrBarShow = !state.attrBarShow;
};

const { mixinState } = useSelectListen(canvasEditor);

provide('fabric', fabric);
provide('canvasEditor', canvasEditor);
provide('mixinState', mixinState);
</script>
<style lang="less" scoped>
.top {
  position: fixed;
  top: 2rem;
  left: 2rem;
  z-index: 999;
  display: flex;
}
// 关闭按钮
.close-btn {
  width: 20px;
  height: 64px;
  cursor: pointer;
  background-image: url();
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
  position: absolute;
  right: -20px;
  z-index: 1;
  top: 50%;
  margin-top: -10px;

  &.left-btn {
    background-image: url();
  }

  &.left-btn-open {
    background-image: url();
    transform: rotateY(360deg);
  }

  &.right-btn {
    background-image: url();
    transform: rotateY(180deg);
    right: 0px;
  }

  &.right-btn-open {
    background-image: url();
    right: 304px;
  }
}

// 属性面板样式
:deep(.attr-item) {
  position: relative;
  margin-bottom: 12px;
  height: 40px;
  padding: 0 10px;
  background: #f6f7f9;
  border: none;
  border-radius: 4px;
  display: flex;
  align-items: center;
  .ivu-tooltip {
    text-align: center;
    flex: 1;
  }
}

.ivu-menu-vertical .menu-item {
  text-align: center;
  padding: 2px;
  box-sizing: border-box;
  font-size: 12px;

  & > i {
    margin: 0;
  }
}
.menu-item {
  display: flex;
  flex-direction: column;
  & > span {
    height: 20px;
    line-height: 20px;
  }
}
:deep(.ivu-menu-horizontal) {
}
:deep(.ivu-layout-header) {
  --height: 45px;
  padding: 0 10px;
  border-bottom: 1px solid #eef2f8;
  background: #fff;
  height: var(--height);
  line-height: var(--height);
}

.home,
.ivu-layout {
  height: 100vh;
}

.icon {
  display: block;
}

.canvas-box {
  position: relative;
}
// 画布内阴影
.inside-shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 9px 2px #0000001f;
  z-index: 2;
  pointer-events: none;
}

#canvas {
  width: 30rem;
  height: 30rem;
  margin: 0 auto;
}

#workspace {
  flex: 1;
  width: 100%;
  position: relative;
  background: #f1f1f1;
  overflow: hidden;
}

.content {
  flex: 1;
  width: 220px;
  padding: 10px;
  padding-top: 0;
  height: 100%;
  overflow-y: auto;
}

.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
  background: none;
}
// 标尺
.switch {
  margin-right: 5px;
}
// 网格背景
.design-stage-grid {
  --offsetX: 0px;
  --offsetY: 0px;
  --size: 16px;
  --color: #dedcdc;
  background-image: linear-gradient(
      45deg,
      var(--color) 25%,
      transparent 0,
      transparent 75%,
      var(--color) 0
    ),
    linear-gradient(45deg, var(--color) 25%, transparent 0, transparent 75%, var(--color) 0);
  background-position: var(--offsetX) var(--offsetY),
    calc(var(--size) + var(--offsetX)) calc(var(--size) + var(--offsetY));
  background-size: calc(var(--size) * 2) calc(var(--size) * 2);
}
</style>
